<script setup lang='ts'>
import { findFirstValidPath } from '@/router/routerHelper'
import { usePermissionStore } from '@/store/modules/permission'
import { useUserStore } from '@fl/store/modules/user'
import { computed } from 'vue'

const userStore = useUserStore()
const permissionStore = usePermissionStore()

const { push } = useRouter()

const userInfo = computed(() => userStore.getUserInfo)
const currentRole = computed(() => userInfo.value?.sysUser?.roles?.[0]?.roleKey || 'visitor')

const dict = {
    operationer: {
        label: '运营中心',
        path: '/operations-pages',
    },
    purchaser: {
        label: '采购中心',
        path: '/purchase-pages',
    },
    supplier: {
        label: '供应中心',
        path: '/supplier-pages',
    },
    visitor: {
        label: '企业认证',
        path: '/authentication',
    },
}

function handleClick() {
    if (currentRole.value === 'visitor') {
        push(dict[currentRole.value].path)
        return
    }

    permissionStore.setSliceRouters(dict[currentRole.value].path)

    // 寻找跳转路径
    const validPath = findFirstValidPath(permissionStore.addRouters)

    push(validPath)
}
</script>

<template>
    <RouterLink v-if="userInfo"
                class="px-10 text-16 text-red font-500 flex h-full items-center transition-all duration-200 hover:bg-#f6f6f6"
                :to="dict[currentRole].path"
                @click="handleClick"
    >
        {{ dict[currentRole].label }}
    </RouterLink>
</template>
